<template>
  <div class="sidebar">
    <el-menu
    class="sidebar-el-menu"
    :default-active="onRoutes"
    :collapse="collapse"
    background-color="#324456"
    text-color="#ffffff"
    active-text-color="#20a0ff"
    router
    >
<template v-for="item in items">
  <template>
    <el-menu-item :index="item.index" :key="item.index">
      <i :class="item.icon" ></i>
      {{item.title}}
    </el-menu-item>

  </template>


</template>


    </el-menu>

  </div>
</template>

<script>
import bus from "../assets/js/bus";
export default {
  name: "TheAside",
  data(){
    return{
      collapse:false,/*默认菜单不是折叠属性*/
      items:[
        {
          icon:'el-icon-document',
          index:"Info",
          title:"系统首页"
        },
        {
          icon:'el-icon-document',
          index:"Consumer",
          title:"用户管理"
        },
        {
          icon:'el-icon-document',
          index:"Singer",
          title:"歌手管理"
        },
        {
          icon:'el-icon-document',
          index:"SongList",
          title:"歌单管理"
        }

      ]


    }
  },

  computed: {
    onRoutes() {
      return this.$route.path.replace('/', '');
    }

  },
  created() {
    /*通过bus进行组件间的通信，来折叠侧边栏*/
    bus.$on('collapse',msg =>{
      this.collapse=msg;
    })
  }
}
</script>

<style scoped>
.sidebar{
  display: block;/*//显示成块状*/
  position: absolute;/*绝对定位*/
  left: 0;
  top: 70px;
  bottom: 0;
  background-color:#334256;
  overflow-y: scroll;
}


.sidebar-el-menu:not(.el-menu--collapse){
  width: 150px;
}
.sidebar::-webkit-scrollbar{
  width: 0;

}
.sidebar >ul{

  height: 100%;

}

</style>
